
<template>
	<scroll-view class="main-sociclub">
		<cu-custom bgColor="bg-gradual-pink" :isBack="false">
			<block slot="content">俱乐部/协会</block>
		</cu-custom>
		<view class="cu-bar  search flex">
			<view hover-class="none" class="flex-sub padding-t"  >
				<picker mode="region" @change="RegionChange" :value="region">
					<view class="picker">
						{{region[1]}}<label class="cuIcon-unfold"></label>
					</view>
				</picker>
				
				</view>
			<view class="flex-fiv padding-t ">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input type="text" placeholder="输入搜索的关键词" v-model="searchval" @input="search_cs" confirm-type="search"></input>
				</view>
			</view>
		</view>
		<scroll-view scroll-x class="bg-white nav text-center" :style="[{top:CustomBar + 'px'}]">
			<view class="cu-item csitem" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in tabNav" :key="index" @tap="tabSelect"
			 :data-id="index">
				{{tabNav[index]}}
			</view>
		</scroll-view>
		<view class="cu-modal drawer-modal justify-start" :class="modalName=='DrawerModalL'?'show':''">
			<view class="cu-dialog basis-lg" @tap.stop="" :style="[{top:CustomBar+'px',height:'calc(100vh - ' + CustomBar + 'px)'}]">
				
				<view class="cu-bar bg-white">
					<view class="action text-blue" @tap="clearModal">取消</view>
					<view class="action text-green" @tap="sxSureModal">确定</view>
				</view>
				
			</view>	
		</view>
		<block v-if="TabCur==0">
			<view class="cu-card article"> 
				<view class="cu-item shadow maininfo" v-for="(item,index) in newclubs" :data-mid="item.id" :key="index" >
					<view class="content">
						<image :src="item.logourl"
						 mode="aspectFill"></image>
						<view class="desc">
							<view class="text-content">
								<view class="name">{{item.name}}</view>
								<view class="unum">人数：<label class="unum-info">{{item.usernum}}</label> 成立于：<label class="unum-info">{{item.createdate}}</label></view>
								
							</view>
							<view class="info-join">
								<navigator hover-class="none"  :url="'/pages/tennis/club_soci/info?id='+item.id">
									<button class="navto">查看/加入</button>
								</navigator>
							</view>
						</view>
					</view>
				</view>
				<view class="flex cd-match padding justify-end">
					<view class="cu-tag bg-blue light  round " @click="createcs" data-cstype="1">创建俱乐部</view>
				</view>
			</view>
		</block>
		<block v-if="TabCur==1">
			<view class="cu-card article">
				<view class="cu-item shadow maininfo" v-for="(item,index) in newsocis" :data-mid="item.id" :key="index" >
					<view class="content">
						<image :src="item.logourl"
						 mode="aspectFill"></image>
						<view class="desc">
							<view class="text-content">
								<view class="name">{{item.name}}</view>
								<view class="unum">人数：<label class="unum-info">{{item.usernum}}</label> 成立于：<label class="unum-info">{{item.createdate}}</label></view>
								
							</view>
							<view class="info-join">
								<navigator hover-class="none" :url="'/pages/tennis/club_soci/info?id='+item.id">
									<button class="navto">查看/加入</button>
								</navigator>
							</view>
						</view>
					</view>
				</view>
				<view class="flex cd-match padding justify-end">
					<view class="cu-tag bg-blue light  round " @click="createcs" data-cstype="2">创建协会</view>
				</view>
			</view>
		</block>
	</scroll-view>
</template>

<script>
	import amap from '../../../common/amap-wx.js';
	export default {
		
		onPullDownRefresh() {
			uni.showLoading({
				title:'加载中...'
			})
			
			uni.hideLoading();
			uni.stopPullDownRefresh();
		
			
		},
		onLoad() {
		},
		
		onShow() {
			this.userid=uni.getStorageSync("uid");
			this.openid=uni.getStorageSync('openid');
			
			uni.authorize({
				scope:'scope.userLocation',
				success(r) {
					uni.getLocation();
					console.log(r)
				},
				fail(res) {
					console.log(res);
				}
			})
			this.amapPlugin = new amap.AMapWX({
				key: this.key  
			});  
			uni.showLoading({
				title:'加载中...'
			})
			this.amapPlugin.getRegeo({
				success: (data) => {  
					console.log(data)  
					this.cities=data[0].regeocodeData.addressComponent.city;
					let province=data[0].regeocodeData.addressComponent.province;
					let district=data[0].regeocodeData.addressComponent.district;
					this.region=[province,this.cities,district];
					
					uni.request({
						url: 'https://www.52tennis.cn/Club_Soci/GetListPage', //仅为示例，并非真实接口地址。
						data: {
							cors:1,
							city:'',
							name:"",
							openid:'',
							currpage:1,
							pagesize:10,
						},
						success:(data)=> {
							console.log(this.cities);
							if(data.data.result==1){
								
								this.clubs=data.data.returnjson;
								
								this.newclubs=[];
								for (let i=0;i<this.clubs.length;i++) {
									if(this.clubs[i].city==this.cities){
										this.newclubs.push(this.clubs[i]);
									}
								}
							}else{
								uni.showToast({
									title: '请求错误',
									icon: 'fail',
									mask: true,
									duration: 3000
								})
							}
						},
						fail:(res)=>{
							uni.showToast({
								title: '请求失败',
								icon: 'fail',
								mask: true,
								duration: 2000
							})
						},
						complete:()=>{
							
						}
					}),
					uni.request({
						url: 'https://www.52tennis.cn/Club_Soci/GetListPage', //仅为示例，并非真实接口地址。
						data: {
							cors:2,
							city:'',
							name:"",
							openid:'',
							currpage:1,
							pagesize:10,
						},
						success:(data)=> {
							
							if(data.data.result==1){
								
								this.socis=data.data.returnjson;
								this.newsocis=[];
								for (let i=0;i<this.socis.length;i++) {
									if(this.socis[i].city==this.cities){
										this.newsocis.push(this.socis[i]);
									}
								}
							}else{
								uni.showToast({
									title: '请求错误',
									icon: 'fail',
									mask: true,
									duration: 3000
								})
							}
						},
						complete: () => {
							uni.hideLoading();
						}
					})
					
					
				} ,
				fail:(res)=>{
					uni.hideLoading()
					uni.showToast({
					    title:"获取位置信息失败"
					})
					
				}
			});  
			
			
			
		},
		data() {
			return {
				userid:"",
				openid:"",
				tabNav:['俱乐部','协会'],
				TabCur: 0,
				CustomBar: this.CustomBar,
				modalName: null,
				cardCur: 0,
				searchval:"",
				cities:"杭州市",
				clubs:[],
				socis:[],
				newclubs:[],
				newsocis:[],
				region:['浙江省','杭州市'],
				key:this.sdkkey,
				amapPlugin:null,
			}
		},
		
		methods: {
			
			createcs(e){
				if(this.userid.length<=0 || this.openid.length<=0){
					uni.showModal({
					    title: '登陆提示',
					    content: '您暂未登陆,是否马上登陆',
					    success: function (res) {
					        if (res.confirm) {
					           uni.switchTab({
									url:"/pages/tennis/user/index"
					           })
					        } else if (res.cancel) {
					        }
					    }
					});
				}else{
					let t= e.currentTarget.dataset.cstype;
					if(t==1){
						uni.navigateTo({
							url:"/pages/tennis/club_soci/create_cs?type=1"
						})
					}else{
						uni.navigateTo({
							url:"/pages/tennis/club_soci/create_cs?type=2"
						})
					}
					
				}
			},
			clearModal(e){
				this.modalName = null
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			search_cs(e){
				if(this.searchval.length>0){
					this.newclubs=[];
					for (let i=0;i<this.clubs.length;i++) {
						if(this.clubs[i].name.indexOf(this.searchval)>=0 && this.clubs[i].city==this.cities){
							this.newclubs.push(this.clubs[i]);
						}
					}
					//return this.newclubs;
					this.newsocis=[];
					for (let i=0;i<this.socis.length;i++) {
						if(this.socis[i].name.indexOf(this.searchval)>=0 && this.socis[i].city==this.cities){
							this.newsocis.push(this.socis[i]);
						}
					}
					
					
				}else{
					this.newclubs=[];
					for (let i=0;i<this.clubs.length;i++) {
						if(this.clubs[i].city==this.cities ){
							this.newclubs.push(this.clubs[i]);
						}
					}
					this.newsocis=[];
					for (let i=0;i<this.socis.length;i++) {
						if(this.socis[i].city==this.cities){
							this.newsocis.push(this.socis[i]);
						}
					}
					//this.newclubs=this.clubs;
					//this.newsocis=this.socis
				}
			},
			showModal(e){
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			RegionChange(e) {
				this.region = e.detail.value;
				this.cities=e.detail.value[1];
				
				if(this.searchval.length>0){
					this.newclubs=[];
					for (let i=0;i<this.clubs.length;i++) {
						if(this.clubs[i].city==this.cities && this.clubs[i].name.indexOf(this.searchval)>=0){
							this.newclubs.push(this.clubs[i]);
						}
					}
					this.newsocis=[];
					for (let i=0;i<this.socis.length;i++) {
						if(this.socis[i].city==this.cities && this.socis[i].name.indexOf(this.searchval)>=0){
							this.newsocis.push(this.socis[i]);
						}
					}
				}else{
					this.newclubs=[];
					for (let i=0;i<this.clubs.length;i++) {
						if(this.clubs[i].city==this.cities ){
							this.newclubs.push(this.clubs[i]);
						}
					}
					this.newsocis=[];
					for (let i=0;i<this.socis.length;i++) {
						if(this.socis[i].city==this.cities){
							this.newsocis.push(this.socis[i]);
						}
					}
				}
				
				
			},
		}
	}
</script>

<style>
	.main-sociclub{
		margin-bottom: 100rpx;
	}
	.csitem{
		
		width: 50%;
		
	}
	.maininfo{
		width: 100%;
		padding:30rpx 0rpx;
	}
	.padding-t{
		padding-top:20upx;
		padding-left: 20upx;
		padding-bottom: 10upx;
	}
	.search{
		flex-wrap: nowrap;
	}
	page{
		font-size: 14px;
	}

	.card-swiper swiper-item 
	{
		padding:10rpx 0rpx 0rpx;
	}
	.card-swiper{
		height: 320rpx !important;
	}
	
	.name{
		font-size: 38rpx;
		color: black;
		overflow: hidden;
	}
	.unum{
		font-size: 23rpx;
	}
	.navto{
		font-size: 25rpx;
		line-height: 40rpx;
		background-color: #0081FF;
		color: white;
	}
	.info-join{
		width: 50%;
	}
	.cu-card.article>.cu-item .content .text-content {
		height:100%;
	}
	.unum-info{
		color: #000000;
		margin-right: 15rpx;
		font-size: 26rpx;
	}
</style>
